<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>55社区</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/theme/default/images/favicon.png">
    <jsp:include page="common.jsp"></jsp:include>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default sq-head ">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <i class="am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="" class="">商品分类</a>
    </h1>
</header>
<div style="height: 49px;"></div>
<div class="cate-search">
    <input type="text" class="cate-input" placeholder="请输入您要的搜索的产品关键词" />
    <input type="button" class="cate-btn" />
</div>
<div class="content-list">
    <div class="list-left">
        <c:forEach var="s" items="${typelist}">
            <li><a href="#" class="">${s.goods_type}</a></li>
        </c:forEach>
    </div>
    <div class="list-right">
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-2 am-avg-lg-4 am-gallery-default am-no-layout">
        </ul>
    </div>
</div>

<!--底部-->
<jsp:include page="footer.jsp"></jsp:include>



<script>
/*function loadType() {
    var a="";
    $(".list-left").html("");
    $.post("{ctx}/goods/type.do",{},function (data) {
        for (var i = 0; i < data.length ; i++) {
            a='<li><a href="" class="atype">{{type}}</a></li>';
            var con=a.replace("{{type}}",data[i].goods_type);
            $(".list-left").append(con);
        }
    },"json")
}*/
function loadGoods(mydata) {
    var a='<li><div class="am-gallery-item"><a href="{{url}}" class=""><img src="{{image}}"><h3 class="am-gallery-title">{{goods}}</h3></a></div></li>';
    $(".am-gallery").html("");
    $.post("${ctx}/goods/list.do",mydata,function (data) {
        for (var i = 0; i < data.length ; i++) {
            var con=a.replace("{{url}}","${ctx}/goods/detail.do?name="+data[i].goods_name);
            con=con.replace("{{image}}","${ctx}/static/"+data[i].goods_img);
            con=con.replace("{{goods}}",data[i].goods_name);
            $(".am-gallery").append(con);
        }
    },"json")
}
var item =  $(".list-left").find("li");
item.click(function () {
    var type=$(this).text();
    var mydata={"type":type};
    $(this).siblings().removeClass("current");
    $(this).addClass("current");
    loadGoods(mydata);
})


//页面加载完成后， 通过cookie中记录的导航名称确定激活指定导航样式
$(function () {
   item.eq(0).click();


})



</script>



</body>
</html>

